<%@ page import="com.graduation.lastproject.entity.HotelInfo" %><%--
  Created by IntelliJ IDEA.
  User: cyy
  Date: 2020/2/29
  Time: 17:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    HotelInfo hotelInfo=(HotelInfo) request.getAttribute("hotelInfo");
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<c:set var="ctx" value="<%=basePath%>"  />
<c:set var="hotelInfo" value="<%=hotelInfo%>"  />
<html>
<head>
    <meta charset="UTF-8">

    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/bootstrapNewTime/moment-with-locales.min.js"></script>
    <script src="/static/bootstrapNewTime/bootstrap-datetimepicker.min.js"></script>
    <link href="/static/bootstrapNewTime/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="/static/js/bookHotel/listDetails/listDetails.js"></script>
    <title></title>
    <style type="text/css">
        body{
            padding-left: 5%;
            padding-right: 5%;
        }
        /*ul影响时间弹窗背景宽度*/
        .nav-pills{
            background-color: #FFEFD5;
            width: 90%;
            font-weight: 900;
            position: fixed;
            border: 1px solid #E0E0E0;

        }
        /*单独使用li影响时间弹窗宽度*/
        .nav>li{
            width:16% ;
        }
        /*表头字体 边距*/
        .nav>li>a {
            color: #632d4f;
            padding: 10px 35%;
        }

        /*表格表头样式*/
        .table>thead{
            height: 20px;
        }
        .table>thead>tr>th{
            color: #632d4f;;
            background-color: #FAF0E6 ;
            width: 15%;
        }
        /*字体居中*/
        .table>tbody>tr>td{
            vertical-align:middle;
        }

        /*按钮样式*/
        button{
            background-color: #ae1a63;
            color: white;
            width: 90px;
            font-weight: 700;
            text-align: center;
        }

        /* 1 边框样式 和边距*/
        .hotelPolicy ,.hotelPosition ,.hotelService,.hotelPhone,.hotelReviews,.hotelBook {
            border: 1px solid #E0E0E0;
            padding: 0 20px;
        }
        /*2 上边框样式*/
        .details{
            border-top: 1px dashed #E0E0E0 ;
        }
        .MoreDetails{
            line-height: 20px;
            margin-top: -1px;
            padding: 10px 0;
        }
        /*  .MoreMore{

              padding: 10px 0;
          }*/
        /* div上下边距*/
        .style{
            margin-top: 20px;
        }
        /*此元素会被显示为内联元素，元素前后没有换行符。*/
        .form-control{
            display: inline;
        }
        /*inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
        inline-flex  将对象作为内联块级弹性伸缩盒显示*/
        .input-group{
            display: inline-flex;
        }
        .input-group-addon{
            width: 30px;
        }
        /* 悬浮变小手*/
        /*    ul：hover{
                cursor:pointer
            }*/
        .input-group.date{
            cursor: pointer;
        }
        span{
            font-size: 16px;
        }
        /*表格悬浮鼠标样式*/
        .table > tbody> tr > td:hover{
            cursor: default;
        }
        img{
            width: 50px;
            height: 50px;
        }
    </style>
    <script>
        var ctx='${ctx}';
        var bigHomePri='${hotelInfo.bigHomePri}';
        var douHomePri='${hotelInfo.douHomePri}';
        var circleHomePri='${hotelInfo.circleHomePri}';
        var couplesHomePri='${hotelInfo.couplesHomePri}';
        var hotelRoomType='${hotelInfo.hotelRoomType}';
        console.info("房间价格:"+bigHomePri+"--"+douHomePri+"---"+circleHomePri+"--"+couplesHomePri)
    </script>
</head>
<body>
<ul class="nav nav-pills">
    <li role="presentation" ><a href="#hotelBooking">酒店预订</a></li>
    <li role="presentation"><a href="#hotelPosition">酒店位置</a></li>
    <li role="presentation"><a href="#hotelService">服务设施</a></li>
    <li role="presentation"><a href="#hotelPhone">酒店介绍</a></li>
    <li role="presentation"><a href="#hotelPolicy">酒店政策</a></li>
    <li role="presentation"><a href="#hotelComment">酒店点评</a></li>
</ul>
<div class="hotelBook style" style="padding-top: 2%;">
    <h3><img src="/static/img/listDetails/circle.png"><a name="hotelBooking" style="color: #D2B48C ;"> 酒店预订</a></h3>
    <div class="details" >
        <span style="text-align:center;line-height: 50%;">入住日期:</span>
        <div class='input-group date' style="width: 14em; padding-top: 10px;" id='datetimepicker1'>
            <input type='text' id="timeIn" class="timeInput form-control" id="timeInput"/>
            <span class="input-group-addon">
					                    <span class="glyphicon glyphicon-calendar"></span>
										</span>
        </div>
        <span style="margin-left: 20px;">退房日期:</span>
        <div class='input-group date' style="width: 14em;cursor: hand ;" id='datetimepicker2'>
            <input type='text'id="timeOut"  class="timeInput form-control" id="timeInput1"/>
            <span class="input-group-addon">
				                    <span class="glyphicon glyphicon-calendar"></span>
									</span>
        </div>
        <span style="margin-left: 20px;">间数:</span>
        <div style="display: inline;width:14em ;">
            <input type="text" value="1" name='room' disabled="disabled"  class="form-control" id="room"style="width: 5%;">
        </div>

        <span style="margin-left: 20px;">住客数:<select class="form-control" style="width: 10%" id="peoples">
			    		<option value="1">1成人</option>
			    		<option value="2">2成人</option>
			    	</select>
        </span>
        <span style="margin-left: 20px;">共<div id="days" style="display: inline;margin: 0px 2px"><input class="form-control" type="text" name="nights" id="nights" style="width: 5%;" value="1" disabled/></div>晚</span>
        <button type="button" id="updateBtn" class="btn btn-primary" style="margin-left: 20px;"> 确认修改</button>
    </div>
    <div class="details">
        <div class="MoreDetails">
            <table class="table" id="table">
                <thead>
                <th>房型</th>
                <th></th>
                <th>取消政策</th>
                <th>人数上限</th>
                <th id="reservePri">预约价格</th>
                <th><button type="button" id="returnHome" > 返回列表</button></th>
                </thead>
                <tbody>
                <tr readonly="readonly" id="id1">
                    <td><img src="/img/picImg?url=${hotelInfo.bigRoomPicLocation}">大床房</td>
                    <td>赠送两份早餐券</td>
                    <td>可取消</td>
                    <td>2</td>
                    <td id="bigHomePri" style="color:#f60">RMB ${hotelInfo.bigHomePri}</td>
                    <c:choose>
                        <c:when test="${hotelInfo.bigHomeNum>0}">
                            <td><button onclick="bookRoom('${hotelInfo.id}','${hotelInfo.hotelName}',1)">预约</button></td>
                        </c:when>
                        <c:otherwise>
                            <td><button disabled style="color:#ccc">满房</button></td>
                        </c:otherwise>
                    </c:choose>
                </tr>
                <tr id="id2">
                    <td><img src="/img/picImg?url=${hotelInfo.douRoomPicLocation}">双人房</td>
                    <td >赠送两份早餐券</td>
                    <td>可取消</td>
                    <td>2</td>
                    <td id="douHomePri" style="color:#f60">RMB ${hotelInfo.douHomePri}</td>
                    <c:choose>
                        <c:when test="${hotelInfo.douHomeNum>0}">
                            <td><button onclick="bookRoom('${hotelInfo.id}','${hotelInfo.hotelName}',2)">预约</button></td>
                        </c:when>
                        <c:otherwise>
                            <td><button disabled style="background-color: #ccc;">满房</button></td>
                        </c:otherwise>
                    </c:choose>
                </tr>
                <tr id="id3">
                    <td><img src="/img/picImg?url=${hotelInfo.circleRoomPicLocation}">商务房</td>
                    <td>赠送两份早餐券</td>
                    <td>可取消</td>
                    <td>2</td>
                    <td id="circleHomePri" style="color:#f60">RMB ${hotelInfo.circleHomePri}</td>
                    <c:choose>
                        <c:when test="${hotelInfo.circleHomeNum>0}">
                            <td><button onclick="bookRoom('${hotelInfo.id}','${hotelInfo.hotelName}',3)">预约</button></td>
                        </c:when>
                        <c:otherwise>
                            <td><button disabled style="background-color: #ccc;">满房</button></td>
                        </c:otherwise>
                    </c:choose>
                </tr>
                <tr id="id4">
                    <td><img src="/img/picImg?url=${hotelInfo.couplesRoomPicLocation}">情侣房</td>
                    <td>赠送两份早餐券</td>
                    <td>可取消</td>
                    <td>2</td>
                    <td id="couplesHomePri" style="color:#f60">RMB ${hotelInfo.couplesHomePri}</td>
                    <c:choose>
                        <c:when test="${hotelInfo.couplesHomeNum!=0}">
                            <td><button onclick="bookRoom('${hotelInfo.id}','${hotelInfo.hotelName}',4)">预约</button></td>
                        </c:when>
                        <c:otherwise>
                            <td><button disabled style="background-color: #ccc;">满房</button></td>
                        </c:otherwise>
                    </c:choose>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="hotelPosition  style">
    <h3><img src="/static/img/listDetails/circle.png"><a name="hotelPosition" style="color: #D2B48C;"> 酒店位置</a></h3>
    <div class="details">
        <div class="MoreDetails">
            <table><tr><td>${hotelInfo.hotelCity}:${hotelInfo.hotelAddress}</td></tr></table>
        </div>
    </div>
</div>
<div class="hotelService  style">
    <h3 ><img src="/static/img/listDetails/circle.png"><a name="hotelService" style="color: #D2B48C;"> 服务设施</a></h3>
    <div class="details">
        <div class="MoreDetails">
            <table >
                <tr><td>${servers}</td></tr>
            </table>
        </div>
    </div>
</div>
<div class="hotelPhone style">
    <h3><img src="/static/img/listDetails/circle.png"><a name="hotelPhone" style="color: #D2B48C;"> 酒店介绍</a></h3>
    <div class="details">
        <div class="MoreDetails">
            <table>
                <tr><td>${hotelInfo.hotelDescription}</td></tr>
            </table>
        </div>
    </div>
</div>
<div class="hotelPolicy  style">
    <h3><img src="/static/img/listDetails/circle.png"><a name="hotelPolicy" style="color: #D2B48C;"> 酒店政策</a></h3>
    <div class="MoreDetails">
        <span>服务电话:</span>
        <span style="padding-left: 22px;">${hotelInfo.hotelPhone}</span>
    </div>
    <div class="details">
        <div class="MoreDetails">
            <span>入住和离店</span>
            <span style="padding-left: 20px;">入住时间:14:00以后 </span>
            <span style="padding-left: 20px;">离店时间:12:00以前</span>
        </div>
    </div>
    <div>
        <div class="MoreDetails" style="border-top: dashed 1px #E0E0E0 ;border-bottom: dashed 1px #E0E0E0 ">
            <span >支付类型 </span>
            <span style="padding-left: 22px;">现金及支付宝</span>
        </div>
    </div>
    <div class="MoreDetails">
    <span>儿童政策</span>
    <span style="padding-left: 22px;">1名12岁以下的儿童入住父母房，住宿和早餐免费</span>
    </div>
</div>

<div class="hotelReviews style">
    <h3><img src="/static/img/listDetails/circle.png"><a name="hotelComment" style="color: #D2B48C;"> 酒店点评</a></h3>
    <div class="details">
        <table>
            <thead>
            <th style="padding: 10px 0px 10px 0px;color: coral;">评论内容</th>
            <th style="padding: 10px 0px 10px 0px ;color: coral">评论时间</th>
            </thead>
            <c:forEach items="${reviewlist}" var="reviewlist">
                    <tr class="MoreDetails">
                         <td style="max-width:350px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden"  onmousemove="removeClassType(this)"><span> ${reviewlist.reviewAll}</span></td>
                         <td style="width: 350px"><span> ${reviewlist.reviewTime}</span></td>
                     </tr>
            </c:forEach>
       </table>
    </div>
</div>
</body>
</html>
